<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<script src="../js/js.vue.js"></script>
</head>
<body>
    <div id="box">
    <!--如果v-if的表达式的值为真的时候渲染，反之不渲染-->
    <button @click="x= !x">点击</button>
    <h1 v-if="ayy" class="ayyas">vue is awesome!</h1>
    <h1 v-if="x" class="ayyas">vue is awesome!</h1>
    <h1 v-show="w" class="ayyas">vue is awesome!</h1>
    <h1 v-else>oh no！</h1>
    <template v-if="ok">
        <h1>1</h1>
        <h2>2</h2>
        <h3>3</h3>
        <h4>4</h4>
        <h5>5</h5>
        <h6>6</h6>
        <p>P</p>
    </template>

</div>
    <script>
        Vue.createApp({
            data(){
                return{
                     x:false,
                     ayy:true,
                     ok:true,
                     w:false

                }
            }
        }).mount('#box')
    </script>
</body>
</html>